<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <h3>WebSocket协议的客户端程序</h3>
  <button id="btConnect">连接到WS服务器</button>
  <button id="btSendAndReceive">向WS服务器发消息并接收消息</button>
  <button id="btClose">断开与WS服务器的连接</button>
  <div id="val"></div>
  <script>
    var wsClient = null; //WS客户端对象
 
    btConnect.onclick = function(){
      //连接到WS服务器，注意：协议名不是http！
      wsClient = new WebSocket('ws://127.0.0.1:9999');
      wsClient.onopen = function(){
        console.log('WS客户端已经成功连接到服务器上')
      }
    }
 
    btSendAndReceive.onclick = function(){
      //向WS服务器发送一个消息
      wsClient.send('getPeerInfo'); //发送的消息
      console.log('WS客户端向WS服务器发送一个消息')
      //接收WS服务器返回的消息
      wsClient.onmessage = function(e){
        console.log('WS客户端接收到一个服务器的消息：'+  JSON.parse(e.data)); //注意加json解析
        val.innerHTML=JSON.parse(e.data);
      }
 
      
    }
 
    btClose.onclick = function(){
      //断开到WS服务器的连接
      wsClient.close();  //向服务器发消息，主动断开连接
      wsClient.onclose = function(){
        //经过客户端和服务器的四次挥手后，二者的连接断开了
        console.log('到服务器的连接已经断开')
      }
    }
  </script>
</body>
</html>
